<template>
  <div>
    <div class="main-div">
      <router-view />
    </div>
    <van-tabbar
      v-model="active"
      @change="changeTabbar(active)"
      active-color="#ee0a24"
      inactive-color="#000"
    >
      <van-tabbar-item icon="shop-o">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" :badge="cartCount"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="contact">会员中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { computed, defineComponent, onBeforeMount, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
export default defineComponent({
  setup() {
    const active = ref(0)
    const router = useRouter()
    const route = useRoute()
    const store = useStore()
    const changeTabbar = (active) => {
      switch (active) {
        case 0:
          router.push({ name: 'shoppingMall' })
          break
        case 1:
          router.push({ name: 'categoryList' })
          break
        case 2:
          router.push({ name: 'cart' })
          break
        case 3:
          router.push({ name: 'usercenter' })
          break
        default:
          break
      }
    }
    const changeTabBarActive = () => {
      if (route.name) {
        const routes = {
          shoppingMall: 0,
          categoryList: 1,
          cart: 2,
          usercenter: 3
        }
        active.value = routes[route.name]
      }
    }
    const cartCount = computed(() => {
      return store.getters.cartInfo.length ? store.getters.cartInfo.length : ''
    })
    watch(route, () => {
      changeTabBarActive()
    })
    onBeforeMount(() => {
      changeTabBarActive()
    })
    return {
      active,
      changeTabbar,
      cartCount
    }
  }
})
</script>
<style lang="scss" scoped>
</style>